<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性方法</title>
</head>
<body>
<div id="div1">
    div1
    <div>div1需要被取值的内容</div>
    div1
</div>
<div id="div2">
    div2
    <div>div2需要被取值的内容</div>
    div2
</div>

<input id="input1" type="text"/><br>
<input id="input2" type="text"/><br>
<input id="input3" type="text"/><br>
<input id="input4" type="text"/><br>

<button type="button" id="btn1">取值按钮</button>
<button type="button" id="btn2">赋值按钮</button>
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#btn1').click(function () {
            //取值
            console.log($('#div1').html());
            console.log($('#div1').text());
            console.log($('#input1').val());
        });
        $('#btn2').click(function () {
            //赋值
            $('#div1').html('<div style="background-color: red;width: 200px;height: 200px">这是添加进来的DIV</div>');
            $('#div2').text('<div style="background-color: red;width: 200px;height: 200px">这是添加进来的DIV</div>');
            $('#input1').val('root');
        });
    })
</script>
</body>
</html>